<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="3"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
    >
    </el-pagination>
    <!-- 子传父：我操作的是这个输入框 -->
    <!-- <input type="text" v-model.number="totals" @input="inputValue"> -->
    <!-- {{ pageTotal }} -->
  </div>
</template>
<script>
  export default {
    //定义一个自定义属性，来接收父组件传过来的total总页数
    props: { pageTotal: Number },
    data() {
      return {
        //这个地方的值，只能赋值一次
        totals: this.pageTotal,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$emit("changeSize",val)
      },
      handleCurrentChange(val) {
        console.log(`当前页:`, val);
        // 每次点击下一页，就把这个值传给父组件
        this.$emit("changePage",val)
      },
      inputValue(e){
         console.log("子组件输入的值：",e.target.value);
         //'mayuhang' 是自定义子组件事件的名称，e.target.value 传输的值！
         this.$emit('mayuhang',Number(e.target.value));
      }
    },
    watch:{
      pageTotal:function(newValue,oldValue){
        console.log("newValue",newValue);
        console.log("oldValue",oldValue);
        //重新对data中的值进行赋值
        this.totals = newValue
      }
    }
  };
</script>